<template>
  <div class="config_eth_ptp">
    <el-header style="background-color: #ced5cf">{{ethPtp['eth-ptp-pac']['port-type'] === 'Electrical' ? '电口' : '光口'}}ETH PTP 配置
<!--        <template slot-scope="scope">-->
<!--          <el-tag-->
<!--              :type="ethPtp['eth-ptp-pac']['port-type'] === 'Electrical' ? 'primary' : 'success'"-->
<!--              disable-transitions>{{"ethPtp['eth-ptp-pac']['port-type'] === 'Electrical' ? '电口' : '光口'"}}</el-tag>-->
<!--        </template>-->
    </el-header>
    <el-form :model="ethPtp['eth-ptp-pac']" :rules="rules" ref="ruleForm" label-width="100px" class="config_form">
      <el-form-item label="工作模式" prop="current-working-mode">
        <el-select v-model="ethPtp['eth-ptp-pac']['current-working-mode']" clearable
                   placeholder="请选择工作模式类型">
          <el-option
              v-for="(i,index) in WorkingMode"
              :key="index"
              :value="i">
          </el-option>
        </el-select>
      </el-form-item>
      <div class="item-msg">* MTU最大值不超过{{ ethPtp['eth-ptp-pac']["supported-mtu"]}}</div>
      <el-form-item label="MTU值" prop="current-mtu" style="margin-top: 3px">

        <el-input v-model="ethPtp['eth-ptp-pac']['current-mtu']"></el-input>
      </el-form-item>

      <el-form-item label="MAC 地址" prop="mac-address">
        <el-input v-model="ethPtp['eth-ptp-pac']['mac-address']"></el-input>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label="流控" prop="pause-control">
            <el-switch
                v-model="ethPtp['eth-ptp-pac']['pause-control']"
                active-color="#13ce66"
                inactive-color="#ff4949">
            </el-switch>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="LLDP 功能" prop="lldp-enable">
            <el-switch
                v-model="ethPtp['eth-ptp-pac']['lldp-enable']"
                active-color="#13ce66"
                inactive-color="#ff4949">
            </el-switch>
          </el-form-item>
        </el-col>
      </el-row>


      <div v-show="ethPtp['eth-ptp-pac']['lldp-enable']">
        <el-form-item label="对端设备信息">
          <el-input v-model="ethPtp['eth-ptp-pac']['lldp-peer-chassis-id']" readonly></el-input>
        </el-form-item>
        <el-form-item label="对端端口" >
          <el-input v-model="ethPtp['eth-ptp-pac']['lldp-peer-port-id']" readonly></el-input>
        </el-form-item>
        <el-form-item label="对端系统" >
          <el-input v-model="ethPtp['eth-ptp-pac']['lldp-peer-system-name']" readonly></el-input>
        </el-form-item>
        <el-form-item label="对端网管地址">
          <el-input v-model="ethPtp['eth-ptp-pac']['lldp-peer-management-address']" readonly></el-input>
        </el-form-item>
      </div>
      <el-form-item>
        <el-image
            style="width: 20px; height: 25px;"
            :src="require('@/assets/union_rule_font.jpg')"
            :preview-src-list="[require('@/assets/union/ethPtpPac.jpg')]">
        </el-image>
        <el-button type="primary" @click="submitForm('ruleForm')">确认</el-button>
        <el-button @click="resetForm('ruleForm')">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "EthPtp",
  data() {
    return {
      rules: {
        'current-working-mode': [
          {required: true, message: '请选择当前工作模式，下拉展示全部工作模式', trigger: 'change'}
        ],
        'current-mtu':[
          {required: true, message: '请输入MTU值', trigger: 'blur'},
        ],
        'current-mtuType': [
          {required: true, message: '请选择当前MTU值', trigger: 'change'}
        ],
        'mac-address': [
          {required: true, message: '请输入MAC地址', trigger: 'blur'},
        ],
      },
      ethPtp: {
        "eth-ptp-pac": {
          "current-working-mode": "100MFullDuplex",
          "supported-mtu":4096,
          "current-mtu": 1,
          "pause-control": true,
          "mac-address": "D0-50-99-A7-B9-EA",
          "lldp-enable": true,
          "port-type":'Optical',
          "lldp-peer-chassis-id": '16',
          "lldp-peer-port-id": '22066',
          "lldp-peer-system-name": 'Huawei v1.2.3',
          "lldp-peer-management-address": '192.168.1.1'
        }
      },
      WorkingMode: ['Auto', '100MFullDuplex', '1000MFullDuplex', '10GEFullDuplex'],

    }

  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style scoped>
.config_eth_ptp {
  width: 360px;
  height: auto;
  float: left;
  /*padding-right: 6px;*/
  margin-left: 3px;
  border: 1px solid #0038f5;
}
.item-msg{
  font-size: 6px;
  line-height: 12px;
  color: red;
  /*margin-left: 60px;*/

}
</style>